<template>
  <div v-loading="listLoading" class="material-list">
    <el-card v-for="item in categories" :key="item.id" class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">{{ item.categoryName }}</span>
      </div>
      <div class="text item">
        <el-table :data="item.priceStrategyItems" border>
          <el-table-column
            show-overflow-tooltip
            prop="productName"
            width="200"
            label="物料名称"
          ></el-table-column>

          <el-table-column
            prop="specName"
            min-width="200"
            label="规格型号"
          ></el-table-column>

          <el-table-column prop="specCode"
            min-width="160"
            label="套餐明细"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="70"
            align="center"
            prop="fbaseUnitIdfname"
            label="单位"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="70"
            align="right"
            prop="price"
            label="价格"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="70"
            align="right"
            prop="moqTimes"
            label="倍数"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="70"
            align="right"
            prop="moq"
            label="起订量"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="70"
            align="center"
            label="暂停"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.stopSell? 'primary': 'success'">
                {{ scope.row.stopSell? '暂停': '开启' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="400"
            label="配料"
          >
          <template slot-scope="scope">

            <el-badge v-if="scope.row.liaobao" :value="scope.row.specNum" class="item">
              <el-tag type="default" disable-transitions>
                料包
              </el-tag>
            </el-badge>
            <el-tag
              v-if="scope.row.zhacai"
              type="warning"
              disable-transitions
            >
              榨菜
            </el-tag>
            <el-tag
              v-if="scope.row.lajiaoyou"
              type="danger"
              disable-transitions
            >
              辣椒油
            </el-tag>
            <el-tag
              v-if="scope.row.xiangcong"
              type="success"
              disable-transitions
            >
              香葱
            </el-tag>
            <el-tag
              v-if="scope.row.xiaohuntun"
              type="info"
              disable-transitions
            >
              小馄饨料粉
            </el-tag>
        </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { doGetStrategyItems } from '@/api/priceStrategyManagement'
export default {
  name: 'MaterialList',
  data() {
    return {
      listLoading: false,
      categories: [],
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        name: '',
      },
    }
  },
  methods: {
    async showMateriaInfo(info) {
      this.listLoading = true
      let data = await doGetStrategyItems(info.id)
      this.categories = data
      this.listLoading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.material-list {
  .title {
    font-weight: bold;
  }
}

.item {
  margin: 10px 15px
}
</style>
